<template>
	<div class="exam-answer">
		<el-dialog title="答卷详情" :visible.sync="dialogVisible" width="100%" :close-on-click-modal="false" :lock-scroll="false" fullscreen>
			<div class="webheart exam-answer-wrap" v-if="dialogVisible">
				<div class="exam-scoll">
					<!-- 试卷头 -->
					<el-card class="box-card exam-info">
						<h2 class="exam-name">{{ row.name }}</h2>
						<p class="exam-info-list">
							<span>
								<b>考试时长</b>
								{{ row.examDuration }} 分钟
							</span>
							<span>
								<b>考试总分</b>
								{{ toFixeds(row.testPaper.totalScore) }} 分
							</span>
							<span>
								<b>及格分</b>
								{{ toFixeds(row.passScore) }} 分
							</span>
						</p>
						<p class="exam-time">{{ row.startTime }} 至 {{ row.endTime }}</p>
						<p class="exam-info-list">
							<span :class="isPass ? 'color-success' : 'color-danger'">
								<b>得分</b>
								{{ examInfo.score }} 分
							</span>
							<span>
								<b>考试时间</b>
								{{ examInfo.createTime }}
							</span>
						</p>
						<div :class="['exam-result', isPass ? 'pass' : 'no-pass']">
							<p>{{ isPass ? '' : '不' }}及格</p>
						</div>
					</el-card>
					<!-- 试卷内容 -->
					<el-card class="box-card exam-wrap">
						<div class="exam-chapter-wrap" v-for="v in testPaperChapterList" :key="v.id">
							<h2>
								{{ v.title }}
								<span class="exam-chapter-des" v-if="v.des">（{{ v.des }}）</span>
							</h2>
							<div class="question-wrap">
								<QuestionItem
									:testSubjectVO="v.testSubjectVO"
									:collected="collectResult"
									:answered="examInfo.testPaperAnswerVOList"
									:type="type"
								/>
							</div>
						</div>
					</el-card>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<!-- 试卷操作 -->
				<el-card class="webheart box-card exam-answer">
					<div class="exam-quick">
						<el-tabs type="card">
							<el-tab-pane v-for="v in testPaperChapterList" :key="v.id" :label="v.title">
								<ul class="num">
									<li
										:class="isRight(item.id) ? 'color-success' : 'color-danger'"
										v-for="(item, idx) in v.testSubjectVO"
										:key="item.id"
										@click="handleAnchor('#anchor' + item.id)"
										:href="'anchor' + item.id"
									>
										<a href="javascript:;">
											{{ ++idx }}
										</a>
									</li>
								</ul>
							</el-tab-pane>
						</el-tabs>
					</div>
					<div class="exam-submit">
						<el-button type="primary" @click="handleCloseDialog()">关 闭</el-button>
					</div>
					<div style="clear: both"></div>
				</el-card>
			</span>
		</el-dialog>
		<WriteScore :examInfo="examInfo" />
	</div>
</template>
<script>
export default {
	components: {
		QuestionItem: () => import('./QuestionItem.vue'),
		WriteScore: () => import('./WriteScore.vue')
	},
	data() {
		return {
			dialogVisible: false,
			paperType: 1, //1普通试卷 2随机试卷
			examInfo: {},
			row: {},
			testIds: [],
			collectResult: [],
			type: ''
			//updateTesteeList
		};
	},
	computed: {
		testPaperChapterList() {
			if (!this.row.hasOwnProperty('id')) return [];
			return this.row.testPaper.testPaperChapterList;
		},
		isRight() {
			return function (id) {
				let data = this.examInfo.testPaperAnswerVOList.filter((v) => v.id == id);
				return data.length && data[0].isRight == 'Y';
			};
		},
		isPass() {
			let { score, testExam } = this.examInfo;
			score = parseFloat(score);
			let passScore = parseFloat(testExam.passScore);
			return score >= passScore;
		}
	},
	mounted() {
		this.$bus.$on('showExamAnswer', (row, type) => this.init(row, type));
		this.$bus.$on('queryCollectStatus', this.checkedCollect);
	},
	beforeDestroy() {
		this.$bus.$off('showExamAnswer');
		this.$bus.$off('queryCollectStatus');
	},
	methods: {
		async init(row, type) {
			this.type = type;
			this.testIds = row.testPaperAnswerVOList.map((v) => v.id);
			await this.checkedCollect();
			this.examInfo = row;
			this.row = row.testExam;
			this.paperType = this.row.testPaper.paperType;
			if (this.paperType == 2) {
				this.row.testPaper.testPaperChapterList.forEach((item) => {
					let testSubjectVO = [];
					item.testSubjectsList.forEach((v) => {
						let obj = v;
						this.$set(obj, 'testSubjects', v);
						testSubjectVO.push(obj);
					});
					this.$set(item, 'testSubjectVO', testSubjectVO);
				});
			}
			this.dialogVisible = true;
		},
		//锚点跳转
		handleAnchor(selector) {
			document.querySelector(selector).scrollIntoView({
				behavior: 'smooth'
			});
		},
		//查询收藏状态
		async checkedCollect() {
			let res = await this.$store.dispatch('checkTestSubjectsError', this.testIds);
			this.collectResult = res.data;
		},
		
		//关闭弹出框
		handleCloseDialog(){
			this.$bus.$emit('updateTesteeList');
			this.dialogVisible = false;
		}
	}
};
</script>
<style scoped lang="scss">
.exam-answer-wrap {
	height: calc(100vh - 300px);
	overflow-y: auto;
	.exam-info {
		position: relative;
		font-size: 12px;
		color: #666;
		text-align: center;
		line-height: 2;
		margin-bottom: 20px;
		.exam-name {
			color: #333;
			line-height: 2;
			font-size: 22px;
		}
		.exam-info-list {
			span {
				margin: 0 10px;
			}
		}
		.exam-result {
			position: absolute;
			right: 125px;
			top: 25px;
			width: 80px;
			height: 80px;
			border: 4px solid #666;
			text-align: center;
			border-radius: 50%;
			transform: rotate(-30deg);
			opacity: 0.8;
			p {
				font-size: 20px;
				color: #666;
				font-weight: bold;
				display: inline-block;
				width: 72px;
				height: 72px;
				line-height: 72px;
				border-radius: 50%;
				margin-top: 3px;
				border: 1px solid #666;
			}
			&.pass {
				border-color: #67c23a;
				p {
					color: #67c23a;
					border-color: #67c23a;
				}
			}
			&.no-pass {
				border-color: #f56c6c;
				p {
					color: #f56c6c;
					border-color: #f56c6c;
				}
			}
		}
	}
	.exam-wrap {
		margin: 20px 0;
		.exam-chapter-wrap {
			h2 {
				color: #333;
				text-indent: 10px;
				background: #eee;
				height: 46px;
				line-height: 46px;
				span {
					color: #666;
					font-weight: normal;
					font-size: 14px;
				}
			}
		}
	}
	.exam-answer {
		position: absolute;
		bottom: 0;
		width: 100%;
		.count-down {
			float: left;
			width: 100px;
			height: 100px;
			box-sizing: border-box;
			text-align: center;
			background: #f5f5f5;
			.num {
				font-size: 26px;
				color: #000;
				font-family: 'ds-digital-bold';
				margin: 25px 0 10px 0;
			}
			.tips {
				color: #999;
			}
		}
	}
}
.exam-quick {
	float: left;
	padding: 0 5px;
	width: calc(100% - 100px);
	height: 100px;
	border-bottom: 1px solid #f5f5f5;
	box-sizing: border-box;
	.num {
		li {
			float: left;
			margin: 5px;
			border-radius: 4px;
			line-height: 22px;
			border: 1px solid #eee;
			background: #f8f8f8;
			a {
				padding: 0 6px;
				display: block;
				color: #fff;
			}

			&.color-success {
				background: #67c23a;
			}
			&.color-danger {
				background: #f56c6c;
			}
		}
	}
}
.exam-submit {
	float: right;
	width: 100px;
	height: 100px;
	text-align: center;
	background: #f5f5f5;
	box-sizing: border-box;
	button {
		margin-top: 30px;
	}
}
</style>
<style scoped>
.exam-answer >>> .el-dialog.is-fullscreen {
	overflow: unset;
}
.exam-answer >>> .el-dialog__header {
	border-bottom: 1px solid #eee;
}
</style>
